<template>
	<div class="info-wrapper scroll">
		<div class="info-pannel">
			<div class="info-pannel-wrapper">
				<div class="info-pannel-title">微信公众号模板消息通知</div>
				<div class="input-wrapper flex center top">
					<span class="info-pannel-text">企业 下单提醒 模板ID</span>
		    		<Input v-model="config.notice_wechat_template_order_payment_shop" placeholder="请填写模板ID" style="width: 380px" />
				</div>
				<div class="input-wrapper flex center top" v-for="(item,index) in wechatTemplateArr" :key="'template'+index">
					<span class="info-pannel-text">{{translateDict[item.title]}}</span>
		    		<Input v-model="item.value" :placeholder="'请填写'+translateDict[item.title]" style="width: 380px" />
				</div>
				<div class="input-wrapper flex">
					<span class="info-pannel-text alpha">企业 下单提醒 模板ID</span>
					<Button :loading='updateLoading1' type="primary" size="default" @click="update(0)">更新</Button>
				</div>
			</div>
			
		</div>
		<div class="info-pannel">
			<div class="info-pannel-wrapper">
				<div class="info-pannel-title">微信小程序模板消息通知</div>
				<div class="input-wrapper flex top">
					<span class="info-pannel-text">模板消息 统一配置</span>
						<Input v-model="miniprogramTemplate" disabled type="textarea" :rows="4" placeholder="请填写模板配置" style="width: 380px;"/>
				</div>
				<div class="input-wrapper flex center">
					<span class="info-pannel-text alpha">模板消息 统一配置</span>
					<Button :loading='updateLoading2' type="primary" size="default" @click="update(1)">更新</Button>
					<Checkbox class='check-content' v-model="reset_old">重置前清空旧模板（推荐）</Checkbox>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
    import { getInfoSetting, saveInfoSetting } from 'api/setting'

	export default {
        data () {
            return {
            		updateLoading1: false,
            		updateLoading2: false,
            		reset_old: true,
            		config: {
            			app_id: '',
            			config_mall_id: '',
            			notice_wechat_template_miniprogram:'',
            			notice_wechat_template_order_payment_shop: '',
            			wechat_id: '',
            		},
            		// 中英文对照表
            		translateDict: {
            			'SERVICE_EXPIRE': '服务即将过期提醒模板ID'
            		}
            	}
        },
        methods: {
        		update(type) {
        			var parm = {};
        			if (type==0) {
        				// 公众号模板消息
        				parm = {};
        				parm.template = {};
        				parm.template.wechatTemplate =  this.config.notice_wechat_template_order_payment_shop;
        				for (var i = 0; i < this.wechatTemplateArr.length; i++) {
        					parm.template[this.wechatTemplateArr[i].title] = this.wechatTemplateArr[i].value;
        				}
            			this.updateLoading1 = true;
        			} else {
    					// 小程序模板消息
    					parm = {"is_init": this.reset_old};
            			this.updateLoading2 = true;
        			}
        			saveInfoSetting(type,parm).then(_res => {
            			this.updateLoading1 = false;
            			this.updateLoading2 = false;
	                    this.$Message.success('保存成功');
	                    if (type==1) {
								// 小程序模板消息
	        					this.config.notice_wechat_template_miniprogram =  JSON.stringify(_res.data.data.add.data);
		        			}
	                }).catch(err => {
            			this.updateLoading1 = false;
            			this.updateLoading2 = false;
	                    this.$Message.error(err.message);
	                })

        		}
        },
        created() {
    		getInfoSetting().then(_res => {
    			this.spinShow = false;
    			this.config = _res.data.config;
            }).catch(err => {
    			this.spinShow = false;
                this.$Message.error(err.message);
            })

        },
        computed: {
        	wechatTemplateArr: function() {
        		var arr = [];			
        		if (this.config.notice_wechat_template) {
        			var infoDict = JSON.parse(this.config.notice_wechat_template);
	        		var keys = Object.keys(infoDict);
	        		for (var i = 0; i < keys.length; i++) {
	        			var key = keys[i];
	        			var value = infoDict[key];
	        			var dict = {};
	        			dict.title = key;
	        			dict.value = value;
	        			arr.push(dict);
	        		}
        		}
        		return arr;

        	},
        	miniprogramTemplate: function() {
        		var templateString = "";
        		if (this.config.notice_wechat_template_miniprogram) {
					var arr = JSON.parse(this.config.notice_wechat_template_miniprogram);
	        		for (var i = 0; i < arr.length; i++) {
	        			templateString += arr[i];
	        			if (i < arr.length-1) {
	        				templateString += ";";
	        			}
	        		}
				}
        		
        		return templateString;

        	}
        },
        components: {
		}
     }
</script>

<style scoped>
	.info-wrapper {
		/*padding: 12px 20px 12px 12px;*/
		height: calc(100vh - 112px);		
	}
	.info-pannel {
		background: white;
		/* padding: 12px; */
		padding-bottom: 0;
		border-bottom: 0;
	}
	.info-pannel-wrapper {
		border: 1px solid #dcdfe6;
		padding-bottom: 20px;
		margin-bottom: 12px;
	}
	.info-pannel-title {
		font-size: 14px;
		font-weight: bold;
		padding: 10px 20px;
		border-bottom: 1px solid #dcdfe6;
	}
	.input-wrapper {
		padding: 10px 20px;
	}
	.input-wrapper p {
		margin-left: 20px;
		font-size: 13px;
	}
	.input-wrapper.top {
		padding-top: 20px;
	}
	.info-pannel-text {
		width: 160px;
		font-size: 14px;
		margin-right: 20px;
		text-align: left;
	}
	.input-content {
		align-items: flex-start;
	}
	.alpha {
		opacity: 0;
	}
	.check-content {
		margin-left: 20px;
	}
</style>